<template>
  <div class="park-list-item-wrapper">
    <div class="left-box">
      <el-image fit="cover" :src="imgUrl" />
    </div>

    <div class="right-box">
      <div class="title">{{ title }}</div>

      <div class="tags-wrapper">
        <el-tag v-for="(item, index) in tags" :key="index" size="mini" class="mr-2">
          {{ item }}
        </el-tag>
      </div>

      <div class="desc">推荐理由：{{ desc }}</div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  components: {},
  props: {
    dataObj: Object,
  },
  data() {
    return {}
  },
  computed: {
    imgUrl() {
      const imgList = this.dataObj.data?.imgList
      if (imgList) {
        return imgList[0]?.url || 'https://iph.href.lu/108x95'
      }
      return 'https://iph.href.lu/108x95'
    },
    title() {
      return this.dataObj.data?.name
    },

    tags() {
      const data = this.dataObj.data
      if (!data) return []

      const keys = ['levelLabel', 'typeLabel']
      const result = []
      keys.forEach((k) => {
        if (data[k]) {
          result.push(data[k])
        }
      })
      return result
    },

    desc() {
      return '奥基爱神的箭富兰克林福建师大离开拉萨看得见；撒赖打开发动机法律九分零四撒酒疯阿里飒飒发来的数据放到雷克萨发'
    },
  },
  mounted() {
    // const swiper = new this.$Swiper('.mySwiper', {
    //   // slidesPerView: 1,
    //   freeMode: true,
    // })
  },
})
</script>
<style lang="scss" scoped>
.park-list-item-wrapper {
  display: flex;
  padding: 15px;
  border-bottom: 1px solid rgba(224, 228, 237, 0.2);

  .left-box {
    .el-image {
      width: 108px;
      height: 95px;
      border-radius: 4px;
    }
  }

  .right-box {
    padding-left: 15px;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .title {
      font-size: 16px;
      font-weight: bold;
    }

    .tags-wrapper {
      display: flex;
      flex-wrap: wrap;
      /* overflow-x: auto; */
    }

    .desc {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      color: rgba(137, 143, 170, 1);
    }
  }
}
</style>
